<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <link rel="stylesheet/less" type="text/css" href="vs-css.less"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
</head>


<body>
  <div class="dashboard-container" id="visual">
  <el-row class="home" :gutter="20">
<!--      user界面 -->
      <el-col :span="10" style="margin-top: 20px">
          <el-card shadow="hover"
                   :model="admin">
              <div class="user">
                  <img src="../../images/root.jpg" />
                  <div class="userinfo">
                      <p class="name" :model="admin.username" >{{admin.username}}</p>
                      <p class="access">管理员</p>
                  </div>
              </div>
              <div class="login-info" >
                  <p>上次登录时间：<span :model="admin.update_time">{{admin.update_time}}</span></p>
                  <p>上次登录地点：<span :model="admin.address">{{admin.address}}</span></p>
              </div>
          </el-card>
<!--          用户年龄饼图-->
          <el-card style="margin-top: 20px; " >
                <div id="age-pie"></div>
          </el-card>
      </el-col>
      </el-col>  <!--              绘制中国地图-->
      <el-col :span="14" style="margin-top: 20px" >
          <el-card shadow="hover">
          <div id="china"></div>
          </el-card>
      </el-col>
  </el-row>
</div>

<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<!--  echarts-->
  <script src="../../js/echarts.js"></script>
<script src="../../api/admin.js"></script>
<script src="../../js/china.js"></script>
<script src="../../js/index.js"></script>




<script type="module">

    new Vue ({
        el: '#visual',
        data() {
            return {
                admin: {
                    'name': '',
                    'address': '',
                    'sex': '',
                    'update_time': '',
                },
                dataListAddress: [],
                ageList:[]
            }
        },
        created() {
            this.init()
            // 获取用户分布数据
            this.getUserCount()
            this.getAgeCount()
        },

        watch: {},
        mounted() {
            this.buildPie()
        },

        methods: {
            // 页面获取admin
            async init() {
                await getAdmin().then(res => {
                    if (String(res.code) === '1') {
                        //    赋值
                        this.admin = res.data
                        this.admin.sex = res.data.sex === '0' ? '女' : '男'
                        this.admin.update_time = String(res.data.update_time)
                    }
                }).catch(err => {
                    this.$message.error("请求出错" + err)
                })
            },
            //获取用户地址分布
            async getUserCount(){
                await getUserNumber().then(res => {
                    if (String(res.code) === '1') {
                        //    赋值
                        this.dataListAddress = Object.keys(res.data).map(item =>(
                            {name:item,value:res.data[item]}
                        ))
                        this.dataListAddress = JSON.parse(JSON.stringify(this.dataListAddress)),
                            console.log("2",this.dataListAddress),
                            this.buildMap()
                    }
                }).catch(err => {
                    this.$message.error("请求出错" + err)
                })
            },
            async getAgeCount(){
                await getAgeData().then(res => {
                    if (String(res.code) === '1') {
                        //    赋值
                        this.ageList = Object.keys(res.data).map(item =>(
                            {name:item,value:res.data[item]}
                        ))
                        this.ageList = JSON.parse(JSON.stringify(this.ageList)),
                            console.log("2",this.ageList),
                            this.buildPie()
                    }
                }).catch(err => {
                    this.$message.error("请求出错" + err)
                })
            },



            //设置中国地图
            buildMap() {
                let myChart = echarts.init(document.getElementById('china'));
                let option = {
                    tooltip: {
                        formatter: function (params, ticket, callback) {
                            return params.seriesName + '<br />' + params.name + '：' + params.value
                        }//数据格式化
                    },
                    //标题
                    title: {
                        left: 'left',
                        text: '用户地区分布统计'
                    },
                    visualMap: {
                        min: 0,
                        max: 500,
                        left: 'left',
                        top: 'bottom',
                        text: ['多', '少'],//取值范围的文字
                        inRange: {
                            color: ['#fff4e6', '#619de4']//取值范围的颜色
                        },
                        show: true//图注
                    },
                    geo: {
                        map: 'china',
                        roam: false,//不开启缩放和平移
                        zoom: 1.23,//视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize: '12',//注意：地图省份名字字体如果过大会导致字体重叠
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: '#F3B329',//鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series: [
                        {
                            name: '用户量',
                            type: 'map',
                            geoIndex: 0,
                            data: this.dataListAddress
                        }
                    ],
                };
                myChart.setOption(option);
            },
        //    设置饼图
            buildPie(){
                    // 1. 实例化对象
                    let myChart = echarts.init(document.getElementById('age-pie'));
                    // 2.指定配置
                    let option = {
                        color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab"],
                        tooltip: {
                            trigger: "item",
                        },
                        title: {
                            left:'left',
                            text:'用户年龄分布',
                        },
                        legend: {
                            bottom: "0%"
                        },
                        series: [
                            {
                                name: "年龄分布",
                                type: "pie",
                                // 这个radius可以修改饼形图的大小
                                // radius 第一个值是内圆的半径 第二个值是外圆的半径
                                radius: ["40%", "60%"],
                                center: ["50%", "45%"],
                                avoidLabelOverlap: false,
                                // 图形上的文字
                                label: {
                                    show: true,
                                    position: "outside"
                                },
                                // 链接文字和图形的线是否显示
                                labelLine: {
                                    show: true
                                },
                                data: this.ageList
                                //     [
                                //     { value: 113, name: "0岁以下" },
                                //     { value: 412, name: "20-29岁" },
                                //     { value: 241, name: "30-39岁" },
                                //     { value: 223, name: "40-49岁" },
                                //     { value: 121, name: "50岁以上" }
                                // ]
                            }
                        ]
                    };
                    myChart.setOption(option)
            }
        },
    })


    </script>

</body>
</html>
